<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<style>
input{ font-size:16px; height:26px;}
.btns input{ width:42px; margin:5px 0; padding:0px;}
</style>
</head>
<body style="background:#22222;">

<div id="mf" style="margin:30px auto 20px;"></div>

<div id="btns" class="btns" style="margin:20px auto 20px; width:600px;">
	<input type="button" value="u"/>
	<input type="button" value="d"/>
	<input type="button" value="l"/>
	<input type="button" value="r"/>
	<input type="button" value="f"/>
	<input type="button" value="b"/>
	<input type="button" value="u'"/>
	<input type="button" value="d'"/>
	<input type="button" value="l'"/>
	<input type="button" value="r'"/>
	<input type="button" value="f'"/>
	<input type="button" value="b'"/>
</div>

<div class="cs" id="cs" style="width:600px; margin:0 auto;">
	<input type="button" value="重置颜色"/>
	<input type="button" value="重置位置"/>
	<input type="button" value="随机打乱"/>
    <input type="text" style="margin-top:20px;" value="uu'bb'lr'f">
	<input type="button" style="margin-top:20px" value="批量操作"/>
</div>


<script type="text/javascript" src="Cube.js"></script>
<script type="text/javascript">
var cube=new Cube('mf',{borderLength:200});

var aInt=document.getElementById('btns').getElementsByTagName('input');
for(var i=0;i<aInt.length;i++){
	aInt[i].onclick=function(){
		cube.turn3(this.value);
	}
}
var aInt2=document.getElementById('cs').getElementsByTagName('input');
aInt2[0].onclick=function(){
	cube.initColor();
};
aInt2[1].onclick=function(){
	cube.initL();
};
aInt2[2].onclick=function(){
	cube.random();
};
aInt2[4].onclick=function(){
	var value=aInt2[3].value;
	cube.turn3s(value);
};
</script>

</body>
</html>